<template>
	<view class="align-center bg-white padding hxt-flex-column">
		<view class="text-center hxt-flex-fill hxt-flex-column" style="align-items: center;justify-content: center;">
			<view class="text-xsl padding">
				<text :class="['cuIcon-'+icon, 'text-'+color]" style="font-size: 160rpx;"></text>
			</view>
			<view v-if="!!title" class="text-xl padding">
				<text class="text-black text-bold">{{title}}</text>
			</view>
			<view v-if="!!msg" class="padding text-grey text-sm" style="padding-top:0rpx; line-height:24px;">
				<text>{{msg}}</text>
			</view>
		</view>
		<view v-if="!!okbtn||!!cancelbtn||exit" class="padding flex flex-direction">
			<button v-if="!!okbtn" class="cu-btn bg-cyan round lg" style="width:100%;" @click="onOk">{{okbtn}}</button>
			<button v-if="!!cancelbtn" class="cu-btn line-grey margin-tb-lg round lg" style="width:100%;" @click="onCancel">{{cancelbtn}}</button>
			<navigator v-if="exit" class="cu-btn line-grey margin-tb-lg round lg" open-type="exit" target="miniProgram">退出小程序</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		name: "hxt-pagetip",
		options: {
			styleIsolation: 'apply-shared'
		},
		props: {
			icon: {
				type: String,
				default: 'infofill'
			},
			color: {
				type: String,
				default: 'red'
			},
			title: {
				type: String,
				default: '出错了'
			},
			msg: {
				type: String,
				default: ''
			},
			okbtn: {
				type: String,
				default: function() {
					return ''
				}
			},
			cancelbtn: {
				type: String,
				default: function() {
					return ''
				}
			},
			exit: {
				type: Boolean,
				default: false
			},
			value: {
				type: null,
				default: null
			}
		},
		data() {
			return {

			};
		},
		methods: {
			onOk: function() {
				this.$emit('onOk', { value: this.value });
			},
			onCancel: function() {
				this.$emit('onCancel', { value: this.value });
			}
		}
	}
</script>

<style>

</style>
